<template>
  <div style="height: 100%" class="orderDetail">
    <div class="pageTitleSubTitle">
      <div class="title" @click="back"><a-icon type="left" style="margin-right: 10px"/>订单详情</div>
    </div>
    <div class="detailCon">
      <div class="title">
        <span>订单状态：{{status == 0?'下单':status == 1?'已取消':status == 2?'支付成功':status == 4?'订单关闭':status == 5?'退款':'部分退款'}}</span>
<!--        //状态 0下单  1已取消 2支付成功 4订单关闭 5退款 6部分退款-->
        <a-button style="width: 100px" type="danger" @click="openEdit" v-if="status == 2">退款</a-button>
      </div>
      <div class="detail">
        <div v-for="(item,index) in orderDetail" :key="index" class="itemCon">
          <div class="childTitle">{{item.title}}</div>
          <div class="detailItem" v-for="(demo,idx) in item.child" :key="idx">
            <span class="demoTitle">{{demo.title}}：</span>
            <span>{{demo.val}}</span>
            <span v-if="demo.copy" class="copy" @click="copyToClipboard(demo.val)">复制</span>
          </div>
        </div>
      </div>
      <div class="tables">
        <div v-for="(item,index) in tableList" :key="index" class="tablesItem">
          <p>{{item.title}}</p>
          <a-table :columns="item.columns" :data-source="item.columnsData" :pagination="false" :rowKey="(record,index) => index">
            <span slot="picture" slot-scope="picture"><img style="width: 61px;border-radius: 2px" :src="picture" alt=""></span>
            <span slot="account" slot-scope="account,record">
              <span>{{account == 1?'储值账户':account == 2?'年卡账户':account == 3?'疗程账户':'赠送账户'}}</span>
              <span style="background: #FF484C;border-radius:8px;font-size:10px;color:#fff;padding:2px 6px;margin-left:5px;box-sizing: border-box" v-if="record.refund_status == 1">已退款</span>
            </span>
            <span slot="good_name" slot-scope="good_name,record" style="display:flex:align-items:center">
              <span>{{good_name}}</span>
              <span style="background: #FF484C;border-radius:8px;font-size:10px;color:#fff;padding:2px 6px;margin-left:5px;box-sizing: border-box" v-if="record.status == 5 || record.status == 6">已退款</span>
              <span style="background: #006AFF;border-radius:8px;font-size:10px;color:#fff;padding:2px 6px;margin-left:5px;box-sizing: border-box" v-if="record.has_give == 1">赠送</span>
            </span>
          </a-table>
        </div>
      </div>
    </div>
    <a-modal v-model="visible" title="退款" width = '750px'>
      <p style="display: flex;align-items: center"><span style="white-space: nowrap">备注：</span><a-input v-model="remark" placeholder="请输入退款备注（非必填）" /></p>
      <a-table
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :rowKey="(record,index)=>index"
        :columns="columns"
        :pagination="false"
        :data-source="data"
        @expand="rowChange"
      >
        <span slot="edit_amount" slot-scope="edit_amount,record"><a-input style="width: 80px!important" @change="e=>parentChange(e,record)" v-model="edit_amount" /></span>
        <span slot="num" slot-scope="num,record"><a-input style="width: 80px!important" @change="e=>changeNum(e,record.pay_number,record.record_id)" v-model="num" type="number" /></span>
        <span slot="picture" slot-scope="picture"><img style="width:61px;border-radius:2px" :src="picture" alt="" /></span>
        <a-table
          slot="expandedRowRender"
          :row-selection="{ selectedRowKeys: selectedRowKeysChildren, onChange: onSelectChangeChildren }"
          slot-scope="text"
          :rowKey="(text,index)=>index+'c'"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
        >
          <span slot="price" slot-scope="price"><a-input style="width: 80px!important" v-model="price" /></span>
          <span slot="edit_num" slot-scope="edit_num,record"><a-input style="width: 80px!important" v-model="edit_num" type="number" /></span>
        </a-table>
      </a-table>
      <template slot="footer">
        <div style="display: flex;justify-content: space-between;color:#333333;font-size: 16px;font-weight: 500">
          <div style="display: flex;justify-content: space-between;align-items: center">
            <span style="margin-right: 90px">已选：{{selectedRowKeys.length}}件</span>
            <div>
              <span>共计金额：</span>
              <a-input style="width: 150px;color:red" v-model="totalPrice" />
            </div>
          </div>
          <div>
            <a-button class="modalCloseBtn" @click="modalChange(1)">关闭</a-button>
            <a-button class="modalConfigBtn" type="primary" :loading="loading" @click="modalChange(2)">保存</a-button>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>
<script>
  const columns = [
    {
      title: '序号',
      dataIndex: 'record_id',
    },
    {
      title: '',
      dataIndex: 'picture',
      scopedSlots:{ customRender:'picture' }
    },
    {
      title: '商品/服务',
      dataIndex: 'name',
    },
    {
      title: '售价',
      dataIndex: 'price',
    },
    {
      title: '实付金额',
      dataIndex: 'payment_amount',
    },
    {
      title: '退款金额',
      dataIndex: 'edit_amount',
      scopedSlots:{ customRender:'edit_amount' }
    },
    {
      title: '选择数量',
      dataIndex: 'num',
      scopedSlots:{ customRender:'num' }
    },
  ];

  const data = [];
  export default {
    name:'orderDetail',
    data(){
      return {
        innerColumns:[
          {
            title: '名称',
            dataIndex: 'name',
          },
          {
            title: '总数量',
            dataIndex: 'total_count',
          },
          {
            title: '剩余数量',
            dataIndex: 'usage_count',
          },
          {
            title: '退款金额',
            dataIndex: 'price',
            scopedSlots:{ customRender:'price' }
          },
          {
            title: '选择数量',
            dataIndex: 'edit_num',
            scopedSlots:{ customRender:'edit_num' }
          },
        ],
        innerData:[],
        remark:'',
        visible: false,
        status:null,
        orderDetail:[
          {
            title:'订单信息',
            child:[
              {title:'订单号',key:'order_short_no',val:'',copy:true},
              {title:'订单状态',key:'order_status',val:''},
              {title:'下单时间',key:'payment_at',val:''},
              {title:'所属门店',key:'store_name',val:''},
              {title:'支付单号',key:'order_no',val:''},
              {title:'预约编号',key:'reservation_id',val:''}
            ]
          },
          {
            title:'付款信息',
            child:[
              {title:'商品售价',key:'payable_amount',val:''},
              {title:'应付金额',key:'payment_amount',val:''},
              {title:'实付金额',key:'payment_amount',val:''},
              {title:'支付时间',key:'payment_at',val:''}
            ]
          },
          {
            title:'客户信息',
            child:[
              {title:'客户名称',key:'customer_name',val:''},
              {title:'会员编号',key:'customer_no',val:''},
            ]
          }
        ],
        tableList:[
          {
            title:'服务信息',
            key:'project',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' }},
              { title: '服务名称', dataIndex: 'good_name', key: 'good_name', scopedSlots: { customRender:'good_name' }},
              { title: '服务售价', dataIndex: 'price', key: 'price'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '购买数量', dataIndex: 'num', key: 'num'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '提成金额', dataIndex: 'commission_amount', key: 'commission_amount'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[],
          },
          {
            title:'商品信息',
            key:'goods',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' }},
              { title: '商品名称', dataIndex: 'good_name', key: 'good_name', scopedSlots: { customRender:'good_name' }},
              { title: '商品售价', dataIndex: 'price', key: 'price'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '购买数量', dataIndex: 'num', key: 'num'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '提成金额', dataIndex: 'commission_amount', key: 'commission_amount'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[],
          },
          {
            title:'品相信息',
            key:'items',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' }},
              { title: '品相名称', dataIndex: 'good_name', key: 'good_name', scopedSlots: { customRender:'good_name' }},
              { title: '品相售价', dataIndex: 'price', key: 'price'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '购买数量', dataIndex: 'num', key: 'num'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '提成金额', dataIndex: 'commission_amount', key: 'commission_amount'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[],
          },
          {
            title:'充值信息',
            key:'account',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title: '账户名称', dataIndex: 'account', key: 'account', scopedSlots: { customRender: 'account' }},
              { title: '前次余额', dataIndex: 'original_amount', key: 'original_amount'},
              { title: '异动金额', dataIndex: 'change_amount', key: 'change_amount'},
              { title: '当前余额', dataIndex: 'balance_amount', key: 'balance_amount'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[],
          },
          {
            title:'卡项信息',
            key:'card',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title: '卡项名称', dataIndex: 'good_name', key: 'good_name', scopedSlots: { customRender: 'good_name' }},
              { title: '售价', dataIndex: 'price', key: 'price'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '提成金额', dataIndex: 'commission_amount', key: 'commission_amount'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[]
          },
          {
            title:'套餐信息',
            key:'packages',
            page:1,
            total:0,
            columns:[
              { title: '序号', dataIndex: 'id', key: 'id'},
              { title:'', dataIndex:'picture',key:'picture', scopedSlots: { customRender: 'picture' }},
              { title: '套餐名称', dataIndex: 'good_name', key: 'good_name', scopedSlots: { customRender: 'good_name' }},
              { title: '售价', dataIndex: 'price', key: 'price'},
              { title: '实付金额', dataIndex: 'payment_amount', key: 'payment_amount'},
              { title: '销售员', dataIndex: 'staffs_name', key: 'staffs_name'},
              { title: '提成金额', dataIndex: 'commission_amount', key: 'commission_amount'},
              { title: '支付方式', dataIndex: 'payment_method', key: 'payment_method'},
            ],
            columnsData:[]
          }
        ],
        data,
        columns,
        selectedRowId:[],
        selectedRowIdChildren:[],
        selectedRowKeys: [], // Check here to configure the default column
        selectedRowKeysChildren:[],
        loading: false,
        totalPrice: 0,
        oder_payment_amount:0,
      }
    },
    created() {
      this.getInfo()
    },
    methods:{
      parentChange(e,id){
        this.data.forEach(item=>{
          if(item.good_no === item.good_no) item.edit_amount = e.target.value
        });
      },
      rowChange(e,item){
        item.collection.forEach(item=>{
          item.edit_num = '';
          item.price = ''
        });
        this.innerData = item.collection
      },
      modalChange(moadlType){
        if(moadlType === 1) return this.visible = false;
        let data = {
          id: this.$route.query.id,
          refund_amount: this.totalPrice,
          refund_goods: [],
          type: this.totalPrice >= this.oder_payment_amount?1:2,
          remark: this.remark,
        };
        this.selectedRowKeys.forEach(item=>{
          let obj = {
            record_id: this.data[item].record_id,
            amount: this.data[item].edit_amount,
            num: this.data[item].num,
            good_no: this.data[item].good_no,
            sub_good_no: 0
          };
          data.refund_goods.push(obj)
        });
        this.selectedRowIdChildren.forEach(item=>{
          let obj = {
            record_id: 0,
            amount: 0, //金额
            num: 0, //数量
            good_no: 0,
            sub_good_no: 0
          };
          this.data.forEach(demo=>{
            demo.collection.forEach(child=>{
              if(item === child.good_no){
                obj.record_id = demo.record_id;
                obj.amount = child.edit_num;
                obj.num = child.edit_num;
                obj.good_no = demo.good_no;
                obj.sub_good_no = child.good_no;
              }
            })
          });
          data.refund_goods.push(obj)
        });
        this.Api.refundOrder(data,this.$route.query.id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          this.$message.success(res.msg);
          this.visible = false;
          // this.getInfo()
        })
      },
      openEdit(){
        this.visible = true;
        this.Api.orderEdit({},this.$route.query.id).then(res=>{
          if(res.code !== 200) return this.$message.info(res.msg);
          res.data.collection.forEach(item=>{
            item.num = Number(item.pay_number);
            item.edit_amount = ''
          });
          this.data = res.data.collection;
          this.oder_payment_amount = Number(res.data.oder_payment_amount)
        })
      },
      changeNum(e,pay_num,id){let num = Number(pay_num);
        let input_num = Number(e.target.value);
        let config = JSON.parse(JSON.stringify(this.data));
        if(input_num>num) {
          config.forEach(item=>{
            if(item.record_id === id){
              item.num = Number(item.pay_number)
            }
          });
          this.data = config;
          return this.$message.info("退款数量不能大于当前购买数量")
        }
        if(input_num<=0){
          config.forEach(item=>{
            if(item.record_id === id){
              item.num = 1
            }
          });
          this.data = config;
          return this.$message.info("退款数量不能小于1")
        }
        config.forEach(item=>{
          if(item.record_id === id){
            item.num = input_num;
            // item.edit_amount = input_num * Number(item.payment_amount)
          }
        });
        this.data = config;
      },
      getInfo(){
        this.Api.ordersDetail({},this.$route.query.id).then(res=>{
          if(res.code !== 200) return;
          res.data.order_status = res.data.status == 0?'下单':res.data.status == 1?'已取消':res.data.status == 2?'支付成功':res.data.status == 4?'订单关闭':res.data.status == 5?'退款':'部分退款'
          res.data.store_name = res.data.store?res.data.store.name:'--';
          res.data.customer_name = res.data.customer?res.data.customer.name:'--';
          res.data.refund_record_refund_amount = res.data.refund_record?res.data.refund_record.refund_amount:'--';
          res.data.refund_record_created_at = res.data.refund_record?res.data.refund_record.created_at:'--';
          res.data.refund_record_name = res.data.refund_record && res.data.refund_record.staff?res.data.refund_record.staff.name:'--';
          this.status = res.data.status;
          if(res.data.card && res.data.card.length>0) res.data.card.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.project && res.data.project.length>0) res.data.project.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.packages && res.data.packages.length>0) res.data.packages.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.account && res.data.account.length>0) res.data.account.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.goods && res.data.goods.length>0) res.data.goods.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.items && res.data.items.length>0) res.data.items.forEach(item=>{
            item.staffs_name = item.staffs.join('、')
          });
          if(res.data.status == 5 || res.data.status == 6){
            this.orderData.push({
              title:'退款信息',
              child:[
                {title:'退款金额',key:'refund_record_refund_amount',val:''},
                {title:'处理人',key:'refund_record_name',val:''},
                {title:'退款时间',key:'refund_record_created_at',val:''}
              ]
            },)
          }
          this.tableList.forEach(item=>{
            item.columnsData = res.data[item.key]
          });
          this.orderDetail.forEach(item=>{
            item.child.forEach(demo=>{
              demo.val = res.data[demo.key]
            })
          });
        })
      },
      onSelectChangeChildren(selectedRowKeys,item){
        this.selectedRowIdChildren = [];
        item.forEach(item=>{
          this.selectedRowIdChildren.push(item.good_no)
        });
        this.selectedRowKeysChildren = selectedRowKeys;
      },
      onSelectChange(selectedRowKeys) {
        this.totalPrice = 0;
        this.selectedRowKeys = selectedRowKeys;
        selectedRowKeys.forEach(item=>{
          this.totalPrice += Number(this.data[item].payment_amount) * Number(this.data[item].num);
        })
      },
      back(){
        history.back()
      },
      copyToClipboard(val) {
        let createInput = document.createElement("input");
        createInput.value = val;
        document.body.appendChild(createInput);
        createInput.select(); // 选择对象
        document.execCommand("Copy"); // 执行浏览器复制命令
        createInput.style.display = "none";
        this.$message.success('复制成功')
      }
    }
  }
</script>
<style lang="less" scoped>
  .orderDetail{
    .detailCon::-webkit-scrollbar{display: none}
    .detailCon{
      overflow-y: scroll;
      height: calc(100% - 64px);
      .tables{
        .tablesItem{
          background: #ffffff;
          border-radius: 2px;
          margin-top: 8px;
          padding: 16px 24px;
          box-sizing: border-box;
          p{
            color: #333333;
            font-size: 16px;
            font-weight: 500;
          }
        }
      }
      .detail{
        display: flex;
        justify-content: flex-start;
        background: #ffffff;
        border-radius: 2px;
        padding: 16px 24px;
        box-sizing: border-box;
        .itemCon{
          margin-right: 100px;
          .childTitle{
            font-size: 14px;
            color: #333333;
            font-weight: 500;
          }
          .detailItem{
            color: #7B7B7B;
            margin-top: 16px;
            .demoTitle{
              display: inline-block;
              width: 70px;
              text-align: right;
            }
            .copy{
              color: #006AFF;
              margin-left: 10px;
              cursor: pointer;
            }
          }
        }
        .itemCon:nth-last-child(1){
          margin-right: 0;
        }
      }
      .title{
        width: 100%;
        height: 54px;
        line-height: 54px;
        padding: 0 24px;
        box-sizing: border-box;
        background: #ffffff;
        border-radius: 2px;
        color: #333333;
        font-size: 15px;
        font-weight: 500;
        margin: 8px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
</style>
